import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'

// 注意: 函数组件中没有模拟constructor的钩子
//1.创建容器
const container = document.createElement('div')

export default function Test() {
  useEffect(() => {
    // 将容器添加到dom树上
    // 3. 将容器添加到dom树上的指定节点
    document.getElementById('box').appendChild(container)
    return () => {
      // 将容器从dom树上移除
      //   4.组件卸载时,从dom树上删除这个容器
      document.getElementById('box').removeChild(container)
    }
  }, [])
  //   2. 将组件的结构添加到容器中
  return ReactDOM.createPortal(<div>Test</div>, container)
}
